<script setup lang="ts">
import ComponentPanel from './components/ComponentPanel.vue'
import RenderArea from './components/RenderArea.vue'
import PropertyPanel from './components/PropertyPanel.vue'
import { ref } from 'vue'

const selectedComponent = ref<{
  id: string
  type: string
  config: Record<string, unknown>
} | null>(null)

const onSelectComponent = (component: {
  id: string
  type: string
  config: Record<string, unknown>
}) => {
  selectedComponent.value = component
}

const updateComponentConfig = (config: Record<string, unknown>) => {
  if (selectedComponent.value) {
    selectedComponent.value.config = config
  }
}

const getBlockStyle = (index: number) => {
  return {
    animationDelay: `${(index - 1) * 0.1}s`
  }
}

const getDragLineStyle = (index: number) => {
  const lines = [
    { top: '20%', left: '10%', width: '300px', transform: 'rotate(25deg)' },
    { top: '40%', left: '30%', width: '250px', transform: 'rotate(-15deg)' },
    { top: '60%', left: '50%', width: '280px', transform: 'rotate(35deg)' },
    { top: '80%', left: '20%', width: '200px', transform: 'rotate(-25deg)' },
    { top: '30%', left: '70%', width: '220px', transform: 'rotate(45deg)' },
    { top: '70%', left: '60%', width: '180px', transform: 'rotate(15deg)' }
  ]
  const line = lines[index - 1] || { top: '50%', left: '50%', width: '200px', transform: 'rotate(0deg)' }
  return {
    ...line,
    animationDelay: `${(index - 1) * 0.5}s`
  }
}

const getBuildingStyle = (index: number) => {
  const elements = [
    { top: '15%', left: '15%', width: '40px', height: '30px' },
    { top: '25%', left: '75%', width: '50px', height: '25px' },
    { top: '45%', left: '35%', width: '45px', height: '35px' },
    { top: '65%', left: '60%', width: '35px', height: '28px' },
    { top: '75%', left: '20%', width: '42px', height: '32px' },
    { top: '35%', left: '80%', width: '38px', height: '26px' },
    { top: '55%', left: '10%', width: '48px', height: '34px' },
    { top: '85%', left: '70%', width: '40px', height: '30px' }
  ]
  const element = elements[index - 1] || { top: '50%', left: '50%', width: '40px', height: '30px' }
  return {
    ...element,
    animationDelay: `${(index - 1) * 0.3}s`
  }
}
</script>

<template>
  <div class="lowcode-page">
    <!-- 低代码科技风背景 -->
    <div class="lowcode-background">
      <div class="component-grid">
        <div v-for="i in 24" :key="i" class="component-block" :style="getBlockStyle(i)"></div>
      </div>
      <div class="drag-lines">
        <div v-for="i in 6" :key="i" class="drag-line" :style="getDragLineStyle(i)"></div>
      </div>
      <div class="building-animation">
        <div v-for="i in 8" :key="i" class="building-element" :style="getBuildingStyle(i)"></div>
      </div>
    </div>

    <div class="low-code-container h-screen flex">
      <ComponentPanel class="w-64" />
      <RenderArea 
        class="flex-1"
        @select="onSelectComponent"
      />
      <PropertyPanel
        class="w-64"
        :selected-component="selectedComponent"
        @update:config="updateComponentConfig"
      />
    </div>
  </div>
</template>

<style scoped>
.lowcode-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.lowcode-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  z-index: -1;
}

.component-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  padding: 20px;
}

.component-block {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  backdrop-filter: blur(5px);
  animation: blockFloat 3s ease-in-out infinite;
}

.drag-lines {
  position: absolute;
  width: 100%;
  height: 100%;
}

.drag-line {
  position: absolute;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.4) 50%, 
    transparent 100%);
  height: 2px;
  animation: dragFlow 4s ease-in-out infinite;
}

.building-animation {
  position: absolute;
  width: 100%;
  height: 100%;
}

.building-element {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  animation: buildingPulse 2s ease-in-out infinite;
}

.low-code-container {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  margin: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes blockFloat {
  0%, 100% { 
    transform: translateY(0);
    opacity: 0.6;
  }
  50% { 
    transform: translateY(-5px);
    opacity: 0.9;
  }
}

@keyframes dragFlow {
  0% { 
    width: 0;
    opacity: 0;
  }
  50% { 
    width: 300px;
    opacity: 0.8;
  }
  100% { 
    width: 0;
    opacity: 0;
  }
}

@keyframes buildingPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.5;
  }
  50% { 
    transform: scale(1.1);
    opacity: 0.8;
  }
}
</style>
